import Vue from 'vue'


//引入element组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);

// 引入Vant-ui组件库
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

// 引入axio 请求库
// 为什么上方可以用 Vue.use 注册
// 是因为 vant ui 属于 vue 的体系
// axios 是一个通用的请求库, 不属于 Vue
import axios from 'axios'
Vue.prototype.$axios = axios
// 设置axios的基准路径
axios.defaults.baseURL = 'http://157.122.54.189:9083'

// axios.interceptors.response.use() 可以注册一个拦截器
// 放入一个回调函数, 对每次获取的数据进行处理


// 因为拦截器需要弹窗  这里拿不到this.$router
// 所以要单独引入 Toast 组件
import { Toast } from 'vant';
axios.interceptors.response.use(res => {
  // 除了明确用户信息验证失败跳转到登录页以外
  // 还可以封装其他的通用处理, 比如有 statusCode 并且是以 4 开头的三位数字
  // 不知道如何处理的情况下, 只需要统一将 message 给提示出来就可以了
  const reg = /^4\d{2}$/
  if (reg.test(res.data.statusCode)) {

    // 没到组件内部 this.$router 不能使用
    Toast.fail(res.data.message)
  }

  //这里可以添加判断逻辑 如果用户非法进入 则统一处理通用的响应
  if (res.data.message == '用户信息验证失败') {
    localStorage.clear();
    router.replace("/login");
  }

  return res


})
// axios 请求拦截器
// 这样就不用每次发送请求都要加上token了
axios.interceptors.request.use((config) => {
  if (!config.headers.Authorization && localStorage.getItem('token')) {
    config.headers.Authorization = localStorage.getItem('token');
  }
  return config;
})

import router from './router'

// 引入router 后就可以创建路由卫士
//beforeEach 是全局前置守卫, 会拦截所有的页面跳转
// 接收一个回调函数作为参数, 对调转进行处理
router.beforeEach((to, from, next) => {
  // to 目的地的路由配置
  // from 来源路由配置
  // next 正常继续下面操作的放行函数

  if (to.path == '/person' || to.path == '/edit' || to.path == '/focus' || to.path == '/collect' || to.path == '/followup') {  // 如果没有登录就跳转到登录页

    // 有登录就放行
    if (localStorage.getItem('token')) {
      next()
    } else {
      router.push('/login')
    }

    //有就放行
  } else {
    next()
  }
})


Vue.config.productionTip = false

new Vue({
  router,
  render: function (h) { return h(App) }
}).$mount('#app')
